<template>
    <div>
        <p class="perrightwdzl">地址管理</p>
        <div class="perform">
            <form action>
                <div class="input-box">
                姓名 <span style="margin-left:250px;cursor:pointer">添加新地址</span>
                <input type="text" class="inputf" :readonly="isreadonly">
                </div>
                
                <div class="input-box">
                联系电话
                <input type="text" class="inputf" :readonly="isreadonly">
                </div>
                <div class="input-box">
                地址
                <div class="input-box-dz">
                    <v-distpicker :disabled="isreadonly"></v-distpicker>    
                </div>  
                </div>
                <div class="input-box">
                详细地址
                <input type="text" class="inputf" :readonly="isreadonly">
                </div>
                <div class="input-box">
                <input type="button" value="保存" class="mytb">
                <input type="button" value="修改" class="mytb mytb2" @click="isreadonly=false">
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import Distpicker from 'v-distpicker'
export default {
    components: { VDistpicker:Distpicker},
    data() {
    return {
      isreadonly:true
    }
  },
  methods: {
  
  },
  mounted() {
    this.axios({
      url:"http://localhost:3000/data"
    }).then(res=>{
      console.log(res.data)
    })
  }
}
</script>
<style  scoped>
.perrightwdzl {
  margin-top: 13px;
}
.input-box {
  margin-top: 20px;
}
.mytb {
  background-color: #b49d7e;
  width: 50px;
  height: 30px;
  border: 0;
  color: #fffefe;
  font-size: 12px;
  float: left;
  cursor:pointer;
}
.mytb2 {
  margin-left: 20px;
}
.sexbtn {
  width: 50px;
  height: 30px;
  border: 0;
  color: #000;
  outline: none;
  float: left;
}
.sexbtn.active {
  background-color: #b49d7e;
  color: #fffefe;
}
.perform {
  font-size: 12px;
  line-height:1em;
}
.inputf {
  display: block;
  height: 50px;
  width: 380px;
  outline: none;
  border: 1px #ccc solid;
  padding-left: 10px;
  background-color: #f2f2f2;
  margin-top: 6px;
}
.input-box-dz{
    margin-top:6px;
    cursor:pointer;
}
</style>
<style>
.input-box .distpicker-address-wrapper select{
    background-color:#f2f2f2;
}
</style>
